<template>
  <div>
        <a-row :gutter="24">
          <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
            <a-card title="任务总数" :loading="platformLoading"> 
              <div style="height: 200px">
                <AWM-rate  name="镜头数"></AWM-rate>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="12" :md="8" :xl="12" :style="{ marginBottom: '24px' }">
            <a-card :loading="platformLoading">
              <div class="lens-statistical">
                <div class="lens-statistocal-title">
                  <h4><span> 周镜头制作量 </span></h4>
                </div>
                <div class="lens-statistocal-body">
                  <div class="lens-statistocal-time"><h6>{{ weekShot.allTime }}</h6></div>
                  <div class="lens-statistocal-num">
                    <h6>{{ weekShot.allNum }}<span>&nbsp;&nbsp;个</span></h6>
                  </div>
                </div>
                <div class="lens-statistocal-footer">
                  <div class="lens-statistocal-item">
                    <div class="lens-statistocal-icon">
                      <a-icon type="check-circle" />
                    </div>
                    <div class="lens-statistocal-content">
                      <div class="content-num">{{ weekShot.new }}</div>
                      <div>新做镜头分钟数</div>
                    </div>
                  </div>
                  <div class="lens-statistocal-item">
                    <div class="lens-statistocal-icon">
                      <a-icon type="reload" />
                    </div>
                    <div class="lens-statistocal-content">
                      <div class="content-num">{{ weekShot.edit }}</div>
                      <div>修改镜头分钟数</div>
                    </div>
                  </div>
                  <div class="lens-statistocal-item">
                    <div class="lens-statistocal-icon">
                      <a-icon type="area-chart" />
                    </div>
                    <div class="lens-statistocal-content">
                      <div class="content-num">33.28</div>
                      <div>41.37</div>
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
            <a-card title="各等级镜头数" :loading="platformLoading">
              <div style="height: 200px">
                <AWM-bar :chartData="levelRate" name="镜头数"></AWM-bar>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
            <a-card title="新做镜头占比" :loading="platformLoading">
              <div style="height: 200px">
                <AWM-pai :chartData="newRateData" :radius="[30,60]" :height="175"></AWM-pai>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="12" :md="8" :xl="12" :style="{ marginBottom: '24px' }">
            <a-card :loading="platformLoading">
              <div style="height: 255px">
                <AWM-line :chartData="lineData" :lineList="lineList" name="name"></AWM-line>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
            <a-card title="各等级镜头占比" :loading="platformLoading">
              <div style="height: 200px">
                <AWM-bar :chartData="barData" :lineList="barList"></AWM-bar>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
            <a-card :loading="platformLoading">
              <div style="height: 255px">
                <AWM-bar :chartData="barData" name="name"></AWM-bar>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="12" :md="8" :xl="12" :style="{ marginBottom: '24px' }">
            <a-card :loading="platformLoading">
              <div style="height: 255px">
                <AWM-line :chartData="plineData" :lineList="plineList"></AWM-line>
              </div>
            </a-card>
          </a-col>
          <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
            <a-card title="个人制作镜头数排行榜" :loading="platformLoading">
              <div style="position: relative; height: 200px">
                <!-- <div style="position: absolute;top:-80px;bottom:0;left:0;right:0;"> -->
                <AWM-bar :chartData="personBar" name="镜头数" :lengthways="true" :chartScorll="true"></AWM-bar>
                <!-- </div> -->
              </div>
            </a-card>
          </a-col>
        </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, Bar, Trend, MiniSmoothArea } from '@/components'
import { baseMixin } from '@/store/app-mixin'
import { taskByWeekStatistics } from '@/api/system'
import * as echarts from 'echarts'
import AWMPai from '@/components/AWMechart/pai'
import AWMLine from '@/components/AWMechart/line'
import AWMBar from '@/components/AWMechart/bar'
import AWMRate from '@/components/AWMechart/rate'
import { mapGetters } from 'vuex'

export default {
  name: 'aaaaa',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend,
    MiniSmoothArea,
    AWMPai,
    AWMLine,
    AWMBar,
    AWMRate
  },
  data() {
    return {
      weekShot: {
        allNum: 0,   //
        allTime: 0,  //
        new: 0,
        edit: 0,
        editDelayMin: 0,
      },
      
      
      

      levelRate: [
        {
          name: 'S',
          count: 100,
        },
        {
          name: 'A',
          count: 150,
        },
        {
          name: 'B',
          count: 50,
        },
        {
          name: 'C',
          count: 130,
        },
        {
          name: 'D',
          count: 200,
        },
      ],
      newRateData: [
        {
          name: '第一周',
          value: 200,
        },
        {
          name: '第二周',
          value: 200,
        },
        {
          name: '第三周',
          value: 200,
        },
        {
          name: '第四周',
          value: 200,
        },
      ],
      myChart: null,
      platformLoading: false,
      timeValue: null,

      lineData: [
        {
          name: '第一周',
          count: 100,
          beforeCount: 90,
        },
        {
          name: '第二周',
          count: 120,
          beforeCount: 80,
        },
        {
          name: '第三周',
          count: 90,
          beforeCount: 110,
        },
        {
          name: '第四周',
          count: 70,
          beforeCount: 120,
        },
      ],
      lineList: [
        { key: 'count', name: '本月' },
        { key: 'beforeCount', name: '上月' },
      ],

      barData: [
        {
          name: 'S',
          count: 1000,
          newCount: 1000,
        },
        {
          name: 'A',
          count: 120,
          newCount: 120,
        },
        {
          name: 'B',
          count: 200,
          newCount: 200,
        },
        {
          name: 'C',
          count: 130,
          newCount: 130,
        },
        {
          name: 'D',
          count: 87,
          newCount: 87,
        },
      ],
      barList: [
        { key: 'count', name: '新做' },
        { key: 'newCount', name: '修改' },
      ],

      plineData: [
        {
          name: 'AWM',
          levelA: 100,
          levelB: 90,
          levelC: 50,
          levelD: 20,
        },
        {
          name: '有妖气',
          levelA: 120,
          levelB: 80,
          levelC: 40,
          levelD: 60,
        },
        {
          name: '十点半',
          levelA: 90,
          levelB: 70,
          levelC: 100,
          levelD: 120,
        },
        {
          name: 'bilibili',
          levelA: 20,
          levelB: 40,
          levelC: 30,
          levelD: 90,
        },
        {
          name: '超神学院',
          levelA: 120,
          levelB: 170,
          levelC: 200,
          levelD: 130,
        },
        {
          name: '视美',
          levelA: 220,
          levelB: 170,
          levelC: 100,
          levelD: 150,
        },
        {
          name: '天美',
          levelA: 120,
          levelB: 100,
          levelC: 80,
          levelD: 110,
        },
      ],
      plineList: [
        { key: 'levelA', name: 'A' },
        { key: 'levelB', name: 'B' },
        { key: 'levelC', name: 'C' },
        { key: 'levelD', name: 'D' },
      ],

      personBar: [
        {
          name: '启',
          count: 100,
        },
        {
          name: '汤',
          count: 154,
        },
        {
          name: '姬发',
          count: 101,
        },
        {
          name: '嬴政',
          count: 110,
        },
        {
          name: '刘邦',
          count: 80,
        },
        {
          name: '司马炎',
          count: 20,
        },
        {
          name: '李渊',
          count: 110,
        },
        {
          name: '赵匡胤',
          count: 120,
        },
        {
          name: '成吉思汗',
          count: 300,
        },
        {
          name: '朱元璋',
          count: 200,
        },
        {
          name: '皇太极',
          count: 260,
        },
      ],
    }
  },
  filters: {},
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  created() {},
  mounted() {
    this.getAnalysis()
  },
  methods: {
    getAnalysis(){
      taskByWeekStatistics({detailId:8, type:2})
      .then(res=>{
        // let 
        // "totalNumByShot": 0,     // 镜头-任务总数
        // "finishNumByShot": 0,    // 镜头-已完成任务数
        // "retakeNumByShot": 0,    // 镜头-返修次数
        // "hisDelayNumByShot": 0,  // 镜头-历史逾期任务数
        // "nowDelayNumByShot": 0,  // 镜头-当前逾期任务数
        // "totalTimeLength": 0,    // 总时长
        // "finishTimeLength": 0,   // 已完成时长
        // "retakeTimeLength": 0,   // 返修时长
        
        // "hisDelayTimeLength": 0, // 历史逾期时长
        // "nowDelayTimeLength": 0}"// 当前逾期时长
        if(res.data){
          res.data.weeks.forEach((v,i) => {
            let taskJson = v.taskJson ? JSON.parse(v.taskJson) : {}
            if(i == 0){
              let weekShot = { 
                allNum: taskJson.totalNumByShot || 0,   //
                /*?*/ 
                allTime: taskJson.finishTimeLength,  //
                /*?*/ 
                new: taskJson.finishNumByShot || 0,
                edit: taskJson.retakeNumByShot || 0,
              }
              this.weekShot = weekShot;

              if( taskJson.levelNumByShot ){
                taskJson.levelNumByShot.forEach(v=>{

                })
              }
            }
            
          });
        }
      })
    }
  },
}
// "{"levelNumByShot": {"B": 1, "C": 1}, "totalNumByShot": 3, "finishNumByShot": 1, "retakeNumByShot": 2, "totalTimeLength": 0, "finishTimeLength": 0, "retakeTimeLength": 0, "hisDelayNumByShot": 0, "nowDelayNumByShot": 0, "hisDelayTimeLength": 0, "nowDelayTimeLength": 0}"
</script>

<style lang="less" scoped>
// /deep/
// .ant-card{
//   background-color: #202948;
//   .ant-card-head{
//     border-bottom-color:transparent;
//   }
// }

.lens-statistical {
  .lens-statistocal-title {
    position: relative;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    // height: 100px;
    h4 {
      position: relative;
      display: inline-block;
      padding: 5px 20px;
      background-color: #fff;
      text-align: center;
      margin-bottom: 0;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%,-50%);
      font-size: 20px;
      z-index: 1;
      span {
        font-weight: bold;
        color: #fae898;
      }
    }
    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background-color: #fae898;
      z-index: 0;
    }
  }
  .lens-statistocal-body {
    display: flex;
    justify-content: center;
    align-content: center;
    & > div {
      padding: 30px;
      h6 {
        margin: 0;
        line-height: 75px;
        color: inherit;
      }
    }
    .lens-statistocal-time {
      color: #fae898;
      font-size: 120px;
    }
    .lens-statistocal-num {
      color: #9ba8d5;
      font-size: 100px;
      span {
        font-size: 25px;
        font-weight: bold;
      }
    }
  }
  .lens-statistocal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    height: 50px;
    .lens-statistocal-item {
      display: flex;
      align-content: center;
      padding: 0 10px;
      &:nth-child(2) {
        .lens-statistocal-icon {
          color: #be63a8;
        }
      }
      &:nth-child(3) {
        .lens-statistocal-icon {
          color: #be7262;
        }
      }
      .lens-statistocal-icon {
        padding: 6px;
        line-height: 40px;
        font-size: 30px;
        color: #63c0cf;
      }
      .lens-statistocal-content {
        font-size: 15px;
        text-align: center;
        margin-left: 5px;
        color: #9ba8d5;
        font-weight: bold;
        .content-num {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
